<template>
    <div class="pop-quick-navigation">
        <el-form ref="form" :model="form" label-width="90px" v-show="!is_add">
            <el-form-item label="显示方式" class="item-df">
                <div class="top-box">
                    <el-select
                        v-model="form.nav_info.show_type"
                        class="select-w"
                    >
                        <el-option
                            v-for="item in optionsData1"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="addnavFun"
                        >添加导航</el-button
                    >
                </div>
            </el-form-item>
            <div class="nav-box comm-list" v-infinite-scroll="loadFun">
                <div
                    class="nav-row"
                    v-for="(item, index) in data_list"
                    :key="item.id"
                    :style="{
                        width: form.nav_info.show_type == 4 ? '25%' : '20%',
                    }"
                >
                    <el-dropdown
                        class="dropdown-box"
                        placement="bottom"
                        trigger="click"
                        @command="handleCommand"
                    >
                        <div class="img-box">
                            <img :src="item.gd_img ? '' : img_buf" />
                        </div>
                        <div class="name">{{ item.gd_name }}</div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ item, type: '1' }"
                                >编辑</el-dropdown-item
                            >
                            <el-dropdown-item
                                :command="{ item, type: '2', index }"
                                >删除</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-form>
        <!-- 新增/编辑 -->
        <el-form
            ref="navForm"
            :model="navForm"
            label-width="90px"
            v-show="is_add"
            :rules="rules"
        >
            <el-form-item class="item-df" label-width="20px">
                <div class="img-context">
                    <div class="img-box">
                        <addPhoto
                            ref="AddPhoto"
                            :pList="navForm.gd_img"
                            :idyun="idyun"
                            actType="5"
                            @uploadAavatar="uploadAavatar"
                        ></addPhoto>
                    </div>
                    <div class="img-but">
                        <div class="but">
                            <el-button
                                type="primary"
                                size="mini"
                                icon="el-icon-plus"
                                @click="replaceImg(navForm.gd_img[0].url)"
                                >上传图标</el-button
                            >
                        </div>
                        <div class="tis">显示图标，请使用48X48像素大小</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="导航名称" class="item-df" prop="gd_name">
                <el-input
                    v-model="navForm.gd_name"
                    maxlength="5"
                    placeholder="5个字以内"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="跳转路径" class="item-df" prop="gd_txt2">
                <el-input
                    v-model="navForm.gd_txt2"
                    placeholder="请选择跳转路径"
                    @focus="jumpLink"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <div class="but-submit" v-show="is_add">
            <div class="but-box">
                <el-button @click="is_add = false">取消</el-button>
                <el-button type="primary" @click="submitFun">保存</el-button>
            </div>
        </div>
        <imageCropper
            v-if="is_drawer"
            ref="imageCroppers"
            :src="editUrl"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper>
    </div>
</template>

<script>
import staticConst from "@/js/const/StaticConst.js";
import addPhoto from "@/components/comm/AddPhoto.vue";
import imageCropper from "@/components/comm/ImageCropper.vue";
import config from "@/js/conf/Config.js";

export default {
    props: ["form", "is_drawer", "idyun"],
    components: {
        addPhoto,
        imageCropper,
    },
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            optionsData1: [
                {
                    id: "4",
                    name: "每行4列",
                },
                {
                    id: "5",
                    name: "每行5列",
                },
            ],
            data_list: [],
            listForm: {
                pfrom: 0,
                pnum: 20,
                is_all: 2,
                type: "nav_info",
                idyun: this.idyun,
            },
            is_add: false,
            is_soll: true,
            editUrl: "",
            navForm: {},
            rules: {
                gd_name: [
                    {
                        required: true,
                        message: "请输入导航名称",
                        trigger: "blur",
                    },
                ],
                gd_txt2: [
                    {
                        required: true,
                        message: "请选择跳转链接",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData() {
            this.is_add = false;
            if (this.data_list.length == 0) {
                this.getlistFun();
            }
        },
        /*****上传图片成功*****/
        uploadPicSuccess(index, name, result, batchid) {
            this.navForm.gd_img[0].url = result.url;
            this.navForm.gd_img[0].urls = result.name;
        },
        /*******上传头像*******/
        uploadAavatar(data, batchid) {
            this.editUrl = data.url;
        },
        /*****确认编辑图片****/
        confirm(data) {
            this.$refs.AddPhoto.confirm(data, this.uploadPicSuccess);
        },

        /****取消上传****/
        cancel() {
            this.$refs.AddPhoto.cancel();
        },
        // 点击替换按钮
        replaceImg(url) {
            this.$refs.AddPhoto.chooseImage({ url }, 0);
        },
        // 下拉菜单事件
        handleCommand(data) {
            if (data.type == 1) {
                // 编辑
                this.is_add = true;
                this.cancelFun(data.item);
            } else {
                // 删除
                this.$confirm(
                    `确定删除该导航：${data.item.gd_name} ?`,
                    "删除",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(async () => {
                        const param = {
                            type: "nav_info",
                            id: data.item.id,
                            idyun: this.idyun,
                        };
                        let url = config.COMPSET_LINKER_DEL;
                        let res = await this.$api({ url: url, data: param });
                        if (!res) return;
                        if (res.status == 1) {
                            this.$msg({ title: res.msg });
                            this.data_list.splice(data.index, 1);
                        }
                    })
                    .catch(() => {});
            }
        },
        loadFun() {
            if (this.is_soll) return;
            this.listForm.pfrom += 20;
            this.getlistFun();
        },
        jumpLink() {
            this.$emit("jumpLink", this.navForm);
        },
        addnavFun() {
            this.is_add = true;
            this.cancelFun();
        },
        // 初始
        cancelFun(item = {}) {
            this.navForm = {
                gd_id: item.gd_id ? item.gd_id : "",
                gd_img: [
                    {
                        url: item.gd_img ? item.gd_img : "",
                        urls: item.gd_img_rel ? item.gd_img_rel : "",
                    },
                ],
                gd_name: item.gd_name ? item.gd_name : "",
                gd_txt2: item.gd_txt2 ? item.gd_txt2 : "",
                gd_type: item.gd_type ? item.gd_type : "",
                id: item.id != 0 ? item.id : "0",
                idyun: this.idyun,
                is_index: 0,
                show_type: 0,
                type: "nav_info",
            };
        },
        // 保存
        submitFun() {
            this.$refs.navForm.validate(async (valid) => {
                if (valid) {
                    const param = JSON.parse(JSON.stringify(this.navForm));
                    param.gd_img = param.gd_img[0].urls;
                    let url = config.COMPSET_LINKER_SAVE;
                    let res = await this.$api({ url: url, data: param });
                    if (!res) return;
                    if (res.status == 1) {
                        this.$msg({ title: res.msg });
                        this.is_add = false;
                        this.data_list = [];
                        this.listForm.pfrom = 0;
                        this.getlistFun();
                    }
                } else {
                    return false;
                }
            });
        },
        async getlistFun() {
            let url = config.COMPSET_LINKER_LS;
            let param = this.listForm;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data.linker_ls) {
                this.data_list = this.data_list.concat(res.data.linker_ls);
                setTimeout(() => {
                    this.is_soll = false;
                }, 200);
            } else {
                this.is_soll = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.pop-quick-navigation {
    padding-right: 20px;
    height: 100%;
    position: relative;
    .item-df {
        .top-box {
            display: flex;
            justify-content: space-between;
        }
    }
    .but-submit {
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 100%;
        .but-box {
            display: flex;
            justify-content: flex-end;
        }
    }
    .nav-box {
        height: calc(100vh - 250px);
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        .nav-row {
            width: 25%;
            height: 130px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            .img-box {
                width: 80px;
                height: 80px;
                border-radius: 5px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .name {
                width: 80px;
                text-align: center;
                margin: 0 auto;
                margin-top: 10px;
            }
        }
    }
    .img-context {
        display: flex;
        align-content: flex-end;
        .img-box {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            ::v-deep.uploader-box {
                margin: 0;
            }
        }
        .img-but {
            .tis {
                margin-top: 20px;
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>
